<template>
  <div class="f-header">
    <span class="logo">
      <el-icon class="mr-1">
        <Shop />
      </el-icon>
      九离商城后台
    </span>
    <el-tooltip effect="dark" content="展开/折叠" placement="bottom">
      <el-icon class="icon-btn" @click="$store.commit('handleAsideWidth')">
        <fold v-if="$store.state.asideWidth === '250px'" />
        <Expand v-else></Expand>
      </el-icon>
    </el-tooltip>
    <el-tooltip effect="dark" content="刷新" placement="bottom">
      <el-icon class="icon-btn" @click="heandleReFresh">
        <refresh />
      </el-icon>
    </el-tooltip>
    <div class="ml-auto flex items-center">
      <el-tooltip effect="dark" content="帮助/使用教程=>开发中" placement="bottom">
        <el-icon class="icon-btn">
          <Opportunity />
        </el-icon>
      </el-tooltip>
      <el-tooltip effect="dark" content="开发中" placement="bottom">
        <el-icon class="icon-btn">
          <GoodsFilled />
        </el-icon>
      </el-tooltip>
      <el-tooltip effect="dark" content="开发中" placement="bottom">
        <el-icon class="icon-btn">
          <PictureFilled />
        </el-icon>
      </el-tooltip>
      <el-tooltip effect="dark" content="全屏/恢复" placement="bottom">
        <el-icon class="icon-btn" @click="toggle">
          <full-screen v-if="!isFullscreen"></full-screen>
          <aim v-else></aim>
        </el-icon>
      </el-tooltip>
      <el-dropdown @command="handleCommand" class="dropdpwn">
        <span class="flex items-center text-light-50">

          <el-avatar class="mr-2" :size="35" :src="$store.state.user.avatar"></el-avatar>
          {{ $store.state.user.username }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
            <a target="_blank" href="https://gitee.com/li-huachuan/jiuli-shop-admin">
              <el-dropdown-item>项目地址</el-dropdown-item>
            </a>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

  <FormDrawer ref="formDrawerRef" title="修改密码" destroyOnClose @submit="onSubmit">
    <!-- <div class="bg-red-400" style="height: 1000px">111111111</div> -->
    <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" size="small">
      <el-form-item prop="oldpassword" label="旧密码">
        <el-input v-model="form.oldpassword" placeholder="请输入旧密码">
        </el-input>
      </el-form-item>

      <el-form-item prop="password" label="新密码">
        <el-input type="password" v-model="form.password" placeholder="请输入新密码" show-password>
        </el-input>
      </el-form-item>

      <el-form-item prop="repassword" label="确认密码">
        <el-input type="repassword" v-model="form.repassword" placeholder="请输入确认密码" show-password>
        </el-input>
      </el-form-item>

    </el-form>
  </FormDrawer>
</template>

<script setup>
import { useFullscreen } from '@vueuse/core'
import FormDrawer from '~/components/FormDrawer.vue'
import { userRepassWord, useLogout } from '~/composables/useManager'

const {
  // 是否全屏状态
  isFullscreen,
  // 切换全屏
  toggle
} = useFullscreen()

const {
  formDrawerRef,
  form,
  rules,
  formRef,
  onSubmit,
  openRePasswordForm
} = userRepassWord()

const {
  logout
} = useLogout()

const handleCommand = (c) => {
  switch (c) {
    case 'logout':
      logout()
      break
    case 'rePassword':
      // showDrawer.value = true
      openRePasswordForm()
      break
  }
}

// 刷新
const heandleReFresh = () => location.reload()

</script>

<style scoped>
.f-header {
  @apply flex items-center bg-blue-700 text-light-50 fixed top-0 left-0 right-0;
  height: 64px;
  z-index: 1000;
}

.logo {
  width: 250px;
  @apply flex justify-center items-center text-xl font-thin;
}

.icon-btn {
  @apply flex justify-center items-center;
  width: 42px;
  height: 64px;
  cursor: pointer;
}

.icon-btn:hover {
  @apply bg-blue-600;
}

.f-header.dropdpwn {
  height: 64px;
  cursor: pointer;
  @apply flex justify-center items-center text-light-50 mx-5;
}
</style>
